<template>
    <div>
        <el-card class="!border-none" shadow="never">
            <el-page-header content="发放优惠券" @back="$router.back()" />
        </el-card>
        <el-card class="!border-none mt-4" shadow="never">
            <div class="font-medium mb-7">优惠券信息</div>
            <el-form label-width="150px">
                <el-form-item label="优惠券名称">{{ data.name }}</el-form-item>
                <el-form-item label="优惠券内容">{{ data.discount_content }}</el-form-item>
                <el-form-item label="使用范围" prop="name"
                    ><span v-if="data.use_goods_type == 1">全部商品</span>
                    <span v-if="data.use_goods_type == 2">指定商品</span>
                    <span v-if="data.use_goods_type == 3">指定商品不可用</span></el-form-item
                >
                <el-form-item label="用券时间">{{ data.use_time_text }}</el-form-item>
                <el-form-item label="发放数量">{{ data.send_total_text }}</el-form-item>
                <el-form-item label="已发放">{{ data.receive_number }}</el-form-item>
                <el-form-item label="已使用">{{ data.use_number || 0 }}</el-form-item>
                <el-form-item label="使用率"
                    >{{
                        Number((Number(data.use_number) / Number(data.receive_number)).toFixed(4)) *
                            100 || 0
                    }}%</el-form-item
                >
            </el-form>
        </el-card>
        <el-card class="!border-none mt-4" shadow="never">
            <div class="font-medium mb-7">发放设置</div>
            <el-form ref="formsRef" :model="formData" label-width="150px" :rules="rules">
                <el-form-item label="每人发放张数" prop="send_user_num">
                    <div class="w-[240px]">
                        <el-input
                            placeholder="请输入发放优惠券的数量"
                            v-model="formData.send_user_num"
                        ></el-input>
                    </div>
                </el-form-item>
                <el-form-item label="发放范围" prop="user_num">
                    <div>
                        <el-button type="primary" @click="handleuser">选择用户</el-button>
                        <div class="w-[800px]">
                            <el-table size="large" class="mt-[14px]" :data="userlists">
                                <el-table-column label="用户编号" prop="sn" />

                                <el-table-column label="用户昵称">
                                    <template #default="{ row }">
                                        <div class="flex items-center">
                                            <el-avatar
                                                :src="row.avatar"
                                                style="height: 60px; min-width: 60px"
                                            />

                                            <el-tooltip
                                                :content="row.nickname"
                                                placement="top-start"
                                            >
                                                <div class="ml-[10px] text_hidden">
                                                    {{ row.nickname }}
                                                </div>
                                            </el-tooltip>
                                        </div>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                    label="用户余额"
                                    prop="user_money
"
                                >
                                    <template #default="{ row }"> ￥{{ row.user_money }} </template>
                                </el-table-column>
                                <el-table-column label="手机号码">
                                    <template #default="{ row }"> {{ row.mobile }} </template>
                                </el-table-column>
                                <el-table-column label="操作" prop="sn">
                                    <template #default="{ row }">
                                        <el-button type="primary" link @click="handleclear(row.id)"
                                            >移除</el-button
                                        >
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                    </div>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
    <editpopup
        v-if="showselect"
        ref="selectRef"
        @close="showselect = false"
        @success="handleselected"
    ></editpopup>
    <footer-btns v-perms="['']">
        <el-button type="primary" @click="handleSubmit">保存</el-button>
    </footer-btns>
</template>
<script setup lang="ts">
import { GetcouponLists, sendCoupon, getCoupondetail, getbasecoupon } from '@/api/application'
import type { FormInstance, FormRules } from 'element-plus'
import editpopup from './component/selectuser.vue'
const route = useRoute()
const router = useRouter()
const data: any = ref({})
const getData = async () => {
    if (!route.query.id) return
    const lists = await getbasecoupon({ id: route.query.id })
    const { use_goods_type } = await getCoupondetail({ id: route.query.id })
    // const res = lists.find((item: any) => {
    //     return item.id == route.query.id
    // })
    // data.value = { ...res, use_goods_type }
    data.value = { ...lists, use_goods_type }
}
getData()
const formData = ref({
    id: route.query.id,
    send_user_num: '',
    send_user: []
})
const formsRef = shallowRef<FormInstance>()
const handleSubmit = async () => {
    // await formsRef.value?.validate()
    await sendCoupon(formData.value)
    router.back()
}

const rules = reactive<FormRules>({
    user_num: [
        {
            required: true,
            message: '请选择',
            trigger: ['blur', 'change']
        }
    ],
    send_user_num: [
        {
            required: true,
            message: '请输入优惠券数量',
            trigger: ['blur', 'change']
        }
    ]
})
const showselect = ref(false)
const selectRef = shallowRef<InstanceType<typeof editpopup>>()
const handleuser = async () => {
    showselect.value = true
    await nextTick()
    selectRef.value?.open()
}
const userlists = ref([])
const handleselected = (val: any) => {
    showselect.value = false
    userlists.value = val
    formData.value.send_user = val.map((item: any) => {
        return item.id
    })
}
const handleclear = (id: any) => {
    userlists.value = userlists.value.filter((item: any) => {
        return item.id != id
    })
    formData.value.send_user = formData.value.send_user.filter((item: any) => {
        return item.id != id
    })
}
</script>
